<template>
    <div class="table">

        <datasource language="en" :table-data="getData" :columns="columns" :pagination="information.pagination"
                    :actions="actions"
                    v-on:change="changePage"
                    v-on:searching="onSearch"></datasource>
    </div>
</template>

<script>
    import axios from '../../util/http';
    import Datasource from 'vue-datasource';
    import cfg from '../../properties';
    export default {
        name:"keepalivelog",
        data: function(){
            const self = this;
            return {
                information: {
                    pagination:{},
                    data:[]
                },
                columns: [
                    {
                        name: 'Id',
                        key: 'id',
                    },
                    {
                        name: '机构名称',
                        key: 'organName',
                    }
                    ,
                    {
                        name: '操作人',
                        key: 'operatorName',
                    },
                    {
                        name: '时间',
                        key: 'atTime',
                    },
                    {
                        name: '事件',
                        key: 'event',
                    }
                ],
                actions: [
                    {
                        text: 'Click',
                        class: 'btn-primary',
                        event(e, row) {
                            self.$message('选中的行数： ' + row.row.id);
                        }
                    }
                ],
                query:''
            }
        },
        components: {
            Datasource
        },
        methods: {
            changePage(values) {
                this.information.pagination.per_page = values.perpage;
                this.information.data = this.information.data;
            },
            onSearch(searchQuery) {
                this.query = searchQuery;
            }
        },
        computed:{
            getData(){
                const self = this;
                return self.information.data.filter(function (d) {
                    if(d.event.indexOf(self.query) > -1){
                        return d;
                    }
                })
            }
        },
        beforeMount(){
            let baseUrl = cfg.api_url+"/log/";
//            this.$http.get('/yun_cms_api/pub/posts/?categoryIds=33ab7cfe-a13a-4816-a531-370ed8ae82f2&status=1').then( (res) => {
            axios.get("/log/").then(res=>{
                let data = res.data;
//                console.log(data);
                let pageinfo  = {};
                pageinfo.total =  data.count;
                pageinfo.per_page = data.rows;
                pageinfo.current_page = data.page;
                pageinfo.last_page = data.totalPage;
                pageinfo.from  = 1;
                pageinfo.to = 15;
                this.information.pagination = pageinfo;
//                console.log(JSON.stringify(data.records))
                this.information.data = data.records;
//                console.log(this.information);

            }).then(()=>{

            }).catch(ero=>{

            })


        }
    }
</script>

<style src="../../../static/css/datasource.css"></style>
